@import '../def.scss';
@font-face {
	
	font-family: "Digital";
	src: url('~@/style/fonts/Digital-7_Mono/digital-7__mono_.ttf');
	font-weight: normal;
	font-style: normal;
}
.content {
	width: 690rpx;
	margin: 20rpx auto 0;
	.head{
		background: #FFFFFF;
		border-radius: 8px;
		padding: 30rpx 0;
		box-sizing: border-box;
	}
	.card{
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 8px;
		
		.thoughts{
			.desc{
				display: flex;
				justify-content: space-between;
				padding: 50rpx 20rpx 30rpx;
				.desc-txt{
					white-space: pre-wrap;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					box-sizing: border-box;
					width: 87%;
				}
				.del{
					width: 28rpx;
					height: 28rpx;
					margin-left: 16rpx;
				}
			}
			.photo-list{
				width: 100%;
				box-sizing: border-box;
				font-size: 0;
				height: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding-left: 15rpx;
				.photo-item {
					width: 136rpx;
					height: 136rpx;
					background: #F3F4F6;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 0;
					flex-wrap: wrap;
					margin:0 15upx 30rpx;
					flex-wrap: wrap;
					position: relative;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		
		.action-bar{
			width: 654rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 10rpx;
			padding-bottom: 35rpx;
			border-bottom: 2rpx solid #F4F4F4;
			.icon{
				margin-left: 30rpx;
				> div{
					display: block;
					font-size: 20rpx;
					font-weight: 400;
					color: #333333;
					line-height: 28px;
					text-align: center;
				}
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.like-list{
			width: 654rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.like-img{
				display: inline-block;
				width: 44rpx;
				height: 44rpx;
				margin-right: 15rpx;
				border-radius: 50%;
				margin-top: 20rpx;
			}
			.like-num{
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
				margin-top: 20rpx;
				white-space: nowrap;
			}
		}
	}
	.list{
		display: flex;
		width: 100%;
		align-items: center;
		flex-wrap: wrap;
		.item{
			width: 230rpx;
			height: 230rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.box-wrap{
				flex-direction: column;
				border-radius: 50%;
				background: #FF6464;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.min-box{
				width: 120rpx;
				height: 120rpx;
				.name{
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 34rpx;
				}
				.time{
					font-size: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 28rpx;
				}
				
			}
			.middle-box{
				width: 170rpx;
				height: 170rpx;
				.name{
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 44rpx;
				}
				.time{
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			}
			.max-box{
				width: 220rpx;
				height: 220rpx;
				.name{
					font-size: 36rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 50rpx;
				}
				.time{
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}
		}
	}
}
.userInfo{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	box-sizing: border-box;
	.left{
		display: flex;
		align-items: center;
		.user-img{
			width: 62rpx;
			height: 64rpx;
			border-radius: 50%;
		}
		.user-name{
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			line-height: 34rpx;
			padding-left: 20rpx;
		}
	}
	.right{
		display: flex;
		align-items: center;
		.time{
			font-size: 20rpx;
			font-weight: 400;
			color: #666666;
			line-height: 28rpx;
		}
		.del{
			width: 28rpx;
			height: 28rpx;
			margin-left: 16rpx;
		}
	}
}

.comment-list{
	width: 654rpx;
	margin: 0 auto;
	.comment-item{
		width: 100%;
		padding-bottom: 20rpx;
		.comment-desc{
			white-space: pre-wrap;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			box-sizing: border-box;
		}
	}
	.more{
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		line-height: 34rpx;
		padding-bottom: 26rpx;
	}
}
.send-popup {
	width: 100%;
	padding: 30rpx 60rpx 50rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0px 0px;
	position: relative;
	.textarea-wrap{
		background: #FFFFFF;
		box-sizing: border-box;
		width: 100%;
		height: 130rpx;
		background: #FFFFFF;
		position: relative;
		textarea {
			width: 100%;
			height: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 26upx;
			line-height: 30rpx;
			color: #000;
		}
	}
	.footer{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btn{
			text-align: center;
			width: 280rpx;
			height: 60rpx;
			border-radius: 6rpx;
			border: 2rpx solid #E6E6E6;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 60rpx;
		}
		.submit{
			border: 2rpx solid #5C9FFE;
			background: #5C9FFE;
			border-radius: 6rpx;
			color: #FFFFFF;
		}
	}
}
